<!DOCTYPE html>
<html style="font-size: 16px;">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <meta name="keywords" content="Noxus Real Estate Agency">
    <meta name="description" content="">
    <meta name="page_type" content="np-template-header-footer-from-plugin">
    <title>buildAdd</title>
    <link rel="stylesheet" href="nicepage.css" media="screen">
    <link rel="stylesheet" href="buildAdd.css" media="screen">
    <script class="u-script" type="text/javascript" src="jquery.js" defer=""></script>
    <script class="u-script" type="text/javascript" src="nicepage.js" defer=""></script>
    <meta name="generator" content="Nicepage 3.20.4, nicepage.com">
    <link id="u-theme-google-font" rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i">


    <script type="application/ld+json">{
        "@context": "http://schema.org",
        "@type": "Organization",
        "name": "",
        "logo": "images/Noxus_Crest.png"
    }</script>
    <meta name="theme-color" content="#478ac9">
    <meta property="og:title" content="buildAdd">
    <meta property="og:type" content="website">
</head>
<body class="u-body">
<div id="app">
    <header class="u-clearfix u-header u-header" id="sec-db62">
        <div class="u-clearfix u-sheet u-valign-middle-xl u-sheet-1">
            <nav class="u-menu u-menu-dropdown u-offcanvas u-menu-1">
                <div class="menu-collapse" style="font-size: 1rem; letter-spacing: 0px;">
                    <a class="u-button-style u-custom-left-right-menu-spacing u-custom-padding-bottom u-custom-top-bottom-menu-spacing u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base"
                       href="#">
                        <svg>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-hamburger"></use>
                        </svg>
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink">
                            <defs>
                                <symbol id="menu-hamburger" viewBox="0 0 16 16" style="width: 16px; height: 16px;">
                                    <rect y="1" width="16" height="2"></rect>
                                    <rect y="7" width="16" height="2"></rect>
                                    <rect y="13" width="16" height="2"></rect>
                                </symbol>
                            </defs>
                        </svg>
                    </a>
                </div>
                <div class="u-custom-menu u-nav-container">
                    <ul class="u-nav u-unstyled u-nav-1">
                        <li class="u-nav-item"><a
                                class="u-button-style u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base"
                                href="Home.html" style="padding: 10px 20px;">Home</a>
                        </li>
						<li class="u-nav-item"><a
						        class="u-button-style u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base"
						        href="Surveillance.html" style="padding: 10px 20px;">Management</a>
						</li>
                        <li class="u-nav-item"><a
                                class="u-button-style u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base"
                                href="statistics.html" style="padding: 10px 20px;">Statistics</a>
                        </li>
                        
                    </ul>
                </div>
                <div class="u-custom-menu u-nav-container-collapse">
                    <div class="u-black u-container-style u-inner-container-layout u-opacity u-opacity-95 u-sidenav">
                        <div class="u-sidenav-overflow">
                            <div class="u-menu-close"></div>
                            <ul class="u-align-center u-nav u-popupmenu-items u-unstyled u-nav-2">
                                <li class="u-nav-item"><a class="u-button-style u-nav-link" href="Home.html"
                                                          style="padding: 10px 20px;">Home</a>
                                </li>
								<li class="u-nav-item"><a class="u-button-style u-nav-link" href="Surveillance.html"
								                          style="padding: 10px 20px;">Management</a>
								</li>
                                <li class="u-nav-item"><a class="u-button-style u-nav-link" href="statistics.html"
                                                          style="padding: 10px 20px;">Statistics</a>
                                </li>
                       
                               
                            </ul>
                        </div>
                    </div>
                    <div class="u-black u-menu-overlay u-opacity u-opacity-70"></div>
                </div>
            </nav>
            <h2 class="u-headline u-text u-text-grey-75 u-text-1">
                <a href="/">Noxus Real Estate Agency</a>
            </h2>
            <a href="https://nicepage.com/css-templates" class="u-image u-logo u-image-1" data-image-width="300"
               data-image-height="400">
                <img src="images/Noxus_Crest.png" class="u-logo-image u-logo-image-1" data-image-width="89">
            </a>
        </div>
    </header>
    <section class="u-clearfix u-section-1" id="sec-94fb">
        <div class="u-clearfix u-sheet u-sheet-1">
            <div class="u-form u-form-1">
                <form action="#" method="POST" class="u-clearfix u-form-spacing-10 u-form-vertical u-inner-form"
                      source="custom" name="form" style="padding: 10px;">
                    
                    <div class="u-form-name u-form-group">
                        <label for="email-41d2" class="u-form-control-hidden u-label"></label>
                        <input v-model="build_id" type="email" placeholder="Build Id" id="email-41d2" name="floor"
                               class="u-border-1 u-border-grey-30 u-input u-input-rectangle u-white" required="">
                    </div>
					
                    <div class="u-form-group u-form-group-3">
                        <label for="text-07e3" class="u-form-control-hidden u-label"></label>
                        <input v-model="house_id" type="text" placeholder="House Id" id="text-07e3" name="room_num"
                               class="u-border-1 u-border-grey-30 u-input u-input-rectangle u-white"
                               required="required">
                    </div>
					<div class="u-form-date u-form-group u-form-group-3">
					    <label for="date-4f64" class="u-form-control-hidden u-label"></label>
					    <input v-model="check_in_date" type="date" placeholder="MM/DD/YYYY" id="date-4f64" name="date" class="u-border-1 u-border-grey-30 u-input u-input-rectangle u-white" required="">
					</div>
                    <!--<div class="u-form-group u-form-group-4">
                        <label for="text-1f3e" class="u-form-control-hidden u-label"></label>
                        <input v-model="date" type="text" placeholder="Build Time" id="text-1f3e" name="build_time"
                               class="u-border-1 u-border-grey-30 u-input u-input-rectangle u-white">
                    </div>-->
                    <div class="u-form-group u-form-group-5">
                        <label for="text-7920" class="u-form-control-hidden u-label"></label>
                        <input v-model="house_type" type="text" placeholder="House Type" id="text-7920" name="text"
                               class="u-border-1 u-border-grey-30 u-input u-input-rectangle u-white">
                    </div>
                    <div class="u-form-group u-form-group-6">
                        <label for="text-c0c9" class="u-form-control-hidden u-label"></label>
                        <input v-model="house_area" type="text" placeholder="House Area" id="text-c0c9" name="build_layout"
                               class="u-border-1 u-border-grey-30 u-input u-input-rectangle u-white">
                    </div>
					<div class="u-form-group u-form-name">
					    <label for="name-41d2" class="u-form-control-hidden u-label"></label>
					    <input v-model="owner_id" type="text" placeholder="Owner Id" id="name-41d2" name="build_name"
					           class="u-border-1 u-border-grey-30 u-input u-input-rectangle u-white" required="">
					</div>
                    <div class="u-align-left u-form-group u-form-submit">
                        <a @click="add()" href="#" class="u-btn u-btn-submit u-button-style">Add</a>
						<a @click="back()" href="#" class="u-btn u-btn-submit u-button-style">Back</a>
                    </div>
                    <div class="u-form-send-message u-form-send-success"> Thank you! Your message has been sent.</div>
                    <div class="u-form-send-error u-form-send-message"> Unable to send your message. Please fix errors
                        then
                        try again.
                    </div>
					<h4 v-if="isshow1" class="u-text u-text-default u-text-palette-2-base u-text-3">&nbsp;&nbsp;Please input everything</h4>
					<h4 v-if="isshow2" class="u-text u-text-default u-text-palette-2-base u-text-3">&nbsp;&nbsp;FOREIGN KEY Error</h4>
				    <h4 v-if="isshow3" class="u-text u-text-default u-text-palette-2-base u-text-3">&nbsp;&nbsp;Wrong with input</h4>
                    <input type="hidden" value="" name="recaptchaResponse">
                </form>
            </div>
			 
        </div>
    </section>


    <footer class="u-align-center u-clearfix u-footer u-grey-80 u-footer" id="sec-b001">
        <div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
            <p class="u-small-text u-text u-text-variant u-text-1">Noxus will rise.</p>
        </div>
    </footer>
    <section class="u-backlink u-clearfix u-grey-80">
        <a class="u-link" href="https://nicepage.com/website-mockup" target="_blank">
            <span>Website Mockup</span>
        </a>
        <p class="u-text">
            <span>created with</span>
        </p>
        <a class="u-link" href="https://nicepage.com/" target="_blank">
            <span>Offline Website Builder Software</span>
        </a>.
    </section>
</div>
<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script>
		var vue = new Vue({
			el: "#app",
			data: {
				isshow1: false,
				isshow2:false,
				isshow3:false,
				build_id: "",
				house_id:"",
				check_in_date:"",
				house_type:"",
				house_area:"",
				owner_id:""
			},
			methods: {
				add: function() {
					if (this.build_id == '' || this.house_id==''||this.check_in_date==''||this.house_type==''||this.house_area==''||this.owner_id=='') {
						this.isshow1 = true;
						this.isshow2=false;
						this.isshow3=false;
						return;
					}else
					{
						this.isshow1 = false;
						this.isshow2=false;
						this.isshow3=false;
					}
					if(parseInt(this.build_id).toString()=="NaN"||parseInt(this.house_id).toString()=="NaN"||parseInt(this.house_area).toString()=="NaN")
					{
						this.isshow1=false;
						this.isshow2=false;
						this.isshow3=true;
						return;
					}
					axios({
						headers: {
							"content-type": "application/x-www-form-urlencoded"
						},
						method: "post",
						url: "http://localhost:8888/simpleweb/house/add",
						/*params: {
							name: this.paramName
						}*/
						data:"build_id="+this.build_id+"&house_id="+this.house_id+"&check_in_date="+this.check_in_date+"&house_type="+this.house_type+"&house_area="+this.house_area+"&owner_id="+this.owner_id
					}).then((res) => {
						console.log(res);
						if(res.data=="Inserted Successfully")
						{
							this.isshow1=false;
							this.isshow2=false;
							this.isshow3=false;
							location.href="Surveillance.html";
						}else{
							this.isshow2=true;
							this.isshow1=false;
							this.isshow3=false;
						}
						
					}).catch((error) => {
						console.log(error);
					});
				},
				back:function(){
					location.href="Surveillance.html";
				}
			}
		});



</script>
</body>
</html>